﻿<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>登录</title>
    <link href="static/css/login.css" rel="stylesheet" />

</head>

<body id="signin-page">
    <div class='login'>
        <div class='login_title'>才源科技综合管理系统</div>
        <form class='login_fields' id="loginForm" action="index.html">
            <div class='login_fields__user'>
                <div class='icon'>
                    <img alt="" src='static/images/user_icon_copy.png'>
                </div>
                <input name="username" id="username" placeholder='用户名' type='text'>
                <div class='validation'>
                    <img alt="" src='static/images/tick.png'>
                </div>
            </div>
            <div class='login_fields__password'>
                <div class='icon'>
                    <img alt="" src='static/images/lock_icon_copy.png'>
                </div>
                <input name="password" id="password" placeholder='密码' type='password'>
                <div class='validation'>
                    <img alt="" src='static/images/tick.png'>
                </div>
            </div>
            <div class='login_fields__submit'>
                <!-- <a class="forgot">忘记密码</a> -->
                <a id="btnSubmitForm">登录</a>
            </div>
        </form>
        <img class="rlogo" src="static/images/logo-notxt.png">
        <div class='disclaimer'>COPYRIGHT &copy; CAIYUANKEJI</div>
    </div>
    <script src="static/js/jquery-1.10.2.min.js"></script>
    <script src="static/js/particleground.js"></script>

    <script type="text/javascript">
        //粒子背景特效调用
        $('body').particleground({
            dotColor: '#E8DFE8',
            lineColor: '#133b88',
            density: '12000'
        });


        //输入高亮
        $('input[name="pwd"]').focus(function() {
            $(this).attr('type', 'password');
        });
        $('input[type="text"]').focus(function() {
            $(this).prev().animate({
                'opacity': '1'
            }, 200);
        });
        $('input[type="text"],input[type="password"]').blur(function() {
            $(this).prev().animate({
                'opacity': '.5'
            }, 200);
        });

        //输入超过1个字符就打勾
        $('input[name="login"],input[name="pwd"]').keyup(function() {
            var Len = $(this).val().length;
            if (!$(this).val() == '' && Len >= 1) {
                $(this).next().animate({
                    'opacity': '1',
                    'right': '30'
                }, 200);
            } else {
                $(this).next().animate({
                    'opacity': '0',
                    'right': '20'
                }, 200);
            }
        });
    </script>

    <!-- jquery 验证框架 -->
    <script src="static/js/jquery.validate.min.js"></script>
    <script src="static/js/messages_zh.min.js"></script>
    <script src="static/js/cherry.form.validate.js"></script>
    <!--Layer-->
    <script src="static/js/layer.js"></script>
    <script src="static/js/cherry.framework.js"></script>

    <!-- 框架样式重写 -->
    <style>
        .layui-layer {
            color: #666 !important
        }
        
        .help-block {
            color: #a01111;
            position: absolute;
            right: 40px;
            top: 11px;
            font-size: 12px;
        }
    </style>

    <script>
        Cherry.debug = false;
        //    Cherry.apiHost = "http://cherry.pseer.com:8289";
        //    Cherry.resHost = "http://cherry.pseer.com";
        Cherry.apiHost = layuiFunciton.URL + "";
        Cherry.resHost = "";
    </script>
    <script src="static/js/cherry.uri.js"></script>
    <script src="static/js/cherry.http.js"></script>
    <script src="static/js/cherry.cookie.js"></script>
    <script>
        var _validators = {
            rules: {
                username: {
                    required: true,
                    maxlength: 20
                },
                password: {
                    required: true,
                    maxlength: 20
                }
            },
            messages: {
                username: {
                    required: "请输入您的用户名",
                    maxlength: "您的用户名需要小于20个字符"
                },
                password: {
                    required: "请输入您的密码",
                    maxlength: "您的密码需要小于20个字符"
                }
            }
        };
        $(document).ready(function() {

            $("#btnSubmitForm").click(function() {
                Cherry.http.submitForm('loginForm', Cherry.dataRequestURI.userSignIn, _validators, function(responseData) {
                    Cherry.successTip("登录成功，即将进入系统...", function() {
                        window.location.href = Cherry.resHost + '/';
                    });
                }, function(errorResponse) {
                    if (errorResponse.code = "1001") {
                        Cherry.errorTip("用户名或密码错误！");
                    }
                });
            });

            $(document).keydown(function(e) {
                if (e.which == 13) {
                    $("#btnSubmitForm").click();
                }
            });
        });
    </script>
</body>

</html>